<template>
	<view class="list__item">
		<image v-if="thumbnail" class="icon" :src="thumbnail"></image>
		<view class="content" @click="$emit('click')">
			<text class="title">{{ title }}</text>
			<view class="right">
				<slot name="right"></slot>	
				<text class="list_text_right" v-if="rightText">{{ rightText }}</text>
				<my-icon v-if="showRightArrow" name="bd-next" style="color:#D6D6D6; font-size: 28upx;"></my-icon>
				<!-- <uni-icons v-if="showRightArrow" type="arrowright" color="#D6D6D6"></uni-icons> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			required: true
		},
		thumbnail: {
			type: String
		},
		showRightArrow: {
			type: Boolean,
			default: true
		},
		rightText: {
			type: String
		},
	}
};
</script>

<style scoped lang="scss">
.list__item {
	display: flex;
	align-items: center;
	font-size: 32upx;
	font-weight: 400;
	color: #363940;
	.uni-icons{
		margin-right: 0upx!important;
	}
	.content {
		display: flex;
		padding: 44upx 0;
		flex: 1;
		// height: 30upx;
		line-height: 30upx;
		overflow: hidden;
		.title {
			flex: 1;
		}
		.rightInput{
			position:absolute;
			right: 60upx;
			top: 0upx;
			text-align: right;
			font-size: 28upx;
			color:#636874;
			width: 300upx;
		}
		.txImg{
			width: 74upx;
			height: 74upx;
			border-radius: 74upx;
			position:absolute;
			right: 40upx;
			top: -20upx;
		}
		.right text {
			margin-right: 20upx;
			font-size: 32upx;
			font-weight: 400;
			color: #636874;
		}
	}
	image {
		width: 36upx;
		height: 36upx;
		margin-right: 24upx;
	}
}
.userList{
	.list__item{
		height: 121upx;
	}
}
.infoList{
	.list_text_right{
			margin-right: 0upx!important;
		}
}
.infoNavR {
		.list_text_right{
			margin-right: 20upx!important;
	}
}
</style>
